<template>
	<el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" size="large">
		<el-form-item prop="username">
			<el-input v-model="loginForm.username" placeholder="用户名：admin / user">
				<template #prefix>
					<el-icon class="el-input__icon"><user /></el-icon>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item prop="password">
			<el-input type="password" v-model="loginForm.password" placeholder="密码：123456" show-password autocomplete="new-password">
				<template #prefix>
					<el-icon class="el-input__icon"><lock /></el-icon>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item prop="captcha">
			<el-row :gutter="20">
				<el-col :span="14">
					<el-input v-model="loginForm.captcha" placeholder="请输入验证码">
						<template #prefix>
							<el-icon class="el-input__icon"><lock /></el-icon>
						</template>
					</el-input>
				</el-col>
				<el-col :span="10" class="login-captcha">
					<img class="captcha-img" :src="verificationCodeUrl" alt="验证码" @click="getCaptcha" />
				</el-col>
			</el-row>
		</el-form-item>
	</el-form>
	<div class="login-btn">
		<el-button :icon="CircleClose" round @click="resetForm(loginFormRef)" size="large">重置</el-button>
		<el-button :icon="UserFilled" round @click="login(loginFormRef)" size="large" type="primary" :loading="loading">
			登录
		</el-button>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { Login } from '@/api/interface';
import { ElNotification } from 'element-plus';
import { GlobalStore } from '@/stores';
import { TabsStore } from '@/stores/modules/tabs';
import { getTimeState } from '@/utils/util';
import { HOME_URL } from '@/config/config';
import { initDynamicRouter } from '@/routers/modules/dynamicRouter';
import { CircleClose, UserFilled } from '@element-plus/icons-vue';
import type { ElForm } from 'element-plus';
import { getUUID } from '@/utils/util';
import { loginFn } from '@/api/modules/login';

const router = useRouter();
const tabsStore = TabsStore();
const globalStore = GlobalStore();

// 定义 formRef（校验规则）
type FormInstance = InstanceType<typeof ElForm>;
const loginFormRef = ref<FormInstance>();
const loginRules = reactive({
	username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
	password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
	captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
});

const loading = ref(false);
const loginForm = reactive<Login.ReqLoginForm>({ username: 'admin', password: 'admin', captcha: '', uuid: '' });
const verificationCodeUrl = ref('');

// 获取验证码
const getCaptcha = async () => {
	const uuid = getUUID();
	const data = `/renren-fast/captcha.jpg?uuid=${uuid}`;
	loginForm.captcha = '';
	loginForm.uuid = uuid;
	verificationCodeUrl.value = data;
};

// 登录
const login = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate(async valid => {
		if (!valid) return;
		loading.value = true;
		try {
			const data = await loginFn({ ...loginForm });
			const token = data?.token;

			globalStore.setToken(token);
			globalStore.setUserInfo();
			// 2.添加动态路由
			await initDynamicRouter();

			// 3.清除上个账号的 tab 信息
			tabsStore.closeMultipleTab();

			// 4.跳转到首页
			router.push(HOME_URL);
			ElNotification({
				title: getTimeState(),
				message: '欢迎登录',
				type: 'success',
				duration: 3000
			});
		} finally {
			loading.value = false;
		}
	});
};

// resetForm
const resetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
};

onMounted(() => {
	// 监听enter事件（调用登录）
	document.onkeydown = (e: any) => {
		e = window.event || e;
		if (e.code === 'Enter' || e.code === 'enter' || e.code === 'NumpadEnter') {
			if (loading.value) return;
			login(loginFormRef.value);
		}
	};
	getCaptcha();
});
</script>

<style scoped lang="scss">
/* stylelint-disable-next-line string-quotes */
@import '../index.scss';
</style>
